<link rel="stylesheet" href="/stylesheets/admin.css">
<style>
    .has-right {
        color: green;
    }
    .none-right {
        color: red;
    }
</style>
<div class="row">
    <div class="col-xs-3">
        <ul class="list-group">
            <li class="list-group-item list-group-title"><strong style="font-size: 16px">管理中心</strong></li>
            <% if (user && user.root) { %>
            <li class="list-group-item"><a class="menu-item" href="/admin/user">用户管理</a></li>
            <li class="list-group-item active"><a class="menu-item" href="/admin/role">角色管理</a></li>
            <% } %>
            <li class="list-group-item"><a class="menu-item" href="/admin/robot">机器人管理</a></li>
            <li class="list-group-item"><a class="menu-item" href="/admin/delegater">代理机管理</a></li>
            <li class="list-group-item"><a class="menu-item" href="/admin/gituser">Git用户管理</a></li>
            <% if (user && user.role && user.role.permissions.managerI) { %>
            <li class="list-group-item"><a class="menu-item" href="/admin/repo">Repo管理</a></li>
            <% } %>
        </ul>
    </div>
    <div class="col-xs-9">
        <div class="setting-div">
            <div class="setting-header-div">
                <button id="create-btn" class="create-btn btn btn-default">添加角色</button>
                <hr>
            </div>
            <div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>苹果打包权限</th>
                        <th>安卓打包权限</th>
                        <th>苹果管理权限</th>
                        <th>安卓管理权限</th>
                        <!--<th>用户审核权限</th>-->
                        <th>管理文档权限</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="list-body">
                    </tbody>
                </table>
            </div>
            <div class="setting-footer-div">

            </div>
        </div>
        <div style="height: 40px"></div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加角色</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="name" class="col-sm-3 control-label">角色名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="name" placeholder="请输入角色名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-3 control-label">iOS/Android权限</label>
                        <div class="col-sm-9">
                            <label class="checkbox-inline">
                                <input type="checkbox" id="package_i" value="option1"> 苹果打包
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" id="package_a" value="option2"> 安卓打包
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" id="manager_i" value="option3"> 苹果管理
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" id="manager_a" value="option4"> 安卓管理
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-3 control-label">平台管理权限</label>
                        <div class="col-sm-9">
                            <label class="checkbox-inline" style="display: none">
                                <input type="checkbox" id="check_user" value="option1"> 审核用户
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" id="article" value="option2"> 管理文档
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="submit-btn" class="btn btn-primary">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<link rel="stylesheet" href="/stylesheets/jquery-confirm.min-3.2.3.css">
<script src="/javascripts/jquery-confirm.min-3.1.1.js"></script>
<script language="JavaScript">

    var editId = null;

    $("#create-btn").click(function () {
        $('#myModalLabel').text('添加角色');
        $('#name').val('');
        document.getElementById("package_i").checked = false;
        document.getElementById("package_a").checked = false;
        document.getElementById("manager_i").checked = false;
        document.getElementById("manager_a").checked = false;
        document.getElementById("check_user").checked = false;
        document.getElementById("article").checked = false;
        $('#myModal').modal('show');
        editId = null;
    })

    function delClick(node) {
        $.confirm({
            title: '确定要删除该角色？',
            content: '删除后将无法恢复',
            animationBounce: 1.5,
            animation: 'rotateXR',
            closeAnimation: 'rotateYR',
            buttons: {
                ok: {
                    text: "确定",
                    btnClass: 'btn-success',
                    keys: ['enter'],
                    action: function(){
                        var tdNode = node.parentNode.parentNode;
                        var id = tdNode.id;
                        delAction(id)
                    }
                },
                cancel: {
                    text: "取消",
                    action:function(){
                    }
                }
            }
        });
    }

    function delAction(id) {
        $.post('/admin/role/del',{id:id},function (data) {
            if (data.code === 0) {
                showSuccess('已删除');
                loadRoleList();
            } else {
                showError(data.message);
            }
        });
    }

    function editClick(node) {
        $('#myModalLabel').text('编辑角色');
        var tdNode = node.parentNode.parentNode;
        var id = tdNode.id;

        $('#name').val(tdNode.getElementsByTagName('td')[0].innerText);

        document.getElementById("package_i").checked = document.getElementById('packageI-node-' + id).className === 'has-right';
        document.getElementById("package_a").checked = document.getElementById('packageA-node-' + id).className === 'has-right';
        document.getElementById("manager_i").checked = document.getElementById('managerI-node-' + id).className === 'has-right';
        document.getElementById("manager_a").checked = document.getElementById('managerA-node-' + id).className === 'has-right';
//        document.getElementById("check_user").checked = document.getElementById('checkUser-node-' + id).className === 'has-right';
        document.getElementById("article").checked = document.getElementById('article-node-' + id).className === 'has-right';
        $('#myModal').modal('show');
        editId = id;
    }

    $("#submit-btn").click(function () {
        let name = $('#name').val();
        let packagei = document.getElementById("package_i").checked;
        let packagea = document.getElementById("package_a").checked;
        let manageri = document.getElementById("manager_i").checked;
        let managera = document.getElementById("manager_a").checked;
//        let checkUser = document.getElementById("check_user").checked;
        let article = document.getElementById("article").checked;

        var param = {
            name : name,
            packageI : packagei,
            packageA : packagea,
            managerI : manageri,
            managerA : managera,
//            checkUser : checkUser,
            article : article,
            roleId : editId
        };
        if (name.trim().length == 0) {
            showError('名称不能为空');
            return;
        }
        if (editId) {
            $.post("/admin/role/edit",param, function(data) {
                if (data.code === 0) {
                    $('#myModal').modal('hide');
                    showSuccess('已更新 ' + name + ' 角色');
                    loadRoleList();
                } else  {
                    showError(data.message);
                }
            });
        } else  {
            $.post("/admin/role/add",param, function(data) {
                if (data.code === 0) {
                    $('#myModal').modal('hide');
                    showSuccess('已添加 ' + name + ' 角色');
                    loadRoleList();
                } else  {
                    showError(data.message);
                }
            });
        }
    })

    $(function () {
        loadRoleList();
    })

    function loadRoleList() {
        $.post("/admin/role/list",function (data) {
            if (data.code == 0) {
                var parent = document.getElementById('list-body');
                for (var i = parent.children.length - 1; i >= 0; i--) {
                    parent.removeChild(parent.children[i]);
                }
                for (var i = 0 ; i < data.data.length ; i++) {
                    var role = data.data[i];
                    var roleNode = document.createElement('tr');
                    var id = role._id;

                    roleNode.id = id;
                    var nameNode = document.createElement('td');
                    nameNode.innerText = role.name;
                    var packageANode = document.createElement('td');
                    packageANode.innerText = role.permissions.packageA ? "✔" : "✘";
                    packageANode.className = role.permissions.packageA ? 'has-right' : 'none-right';
                    packageANode.id = 'packageA-node-' + id;

                    var packageINode = document.createElement('td');
                    packageINode.innerText = role.permissions.packageI ? "✔" : "✘";
                    packageINode.className = role.permissions.packageI ? 'has-right' : 'none-right';
                    packageINode.id = 'packageI-node-' + id;

                    var managerANode = document.createElement('td');
                    managerANode.innerText = role.permissions.managerA ? "✔" : "✘";
                    managerANode.className = role.permissions.managerA ? 'has-right' : 'none-right';
                    managerANode.id = 'managerA-node-' + id;

                    var managerINode = document.createElement('td');
                    managerINode.innerText = role.permissions.managerI ? "✔" : "✘";
                    managerINode.className = role.permissions.managerI ? 'has-right' : 'none-right';
                    managerINode.id = 'managerI-node-' + id;

//                    var checkUserNode = document.createElement('td');
//                    checkUserNode.innerText = role.permissions.checkUser ? "✔" : "✘";
//                    checkUserNode.className = role.permissions.checkUser ? 'has-right' : 'none-right';
//                    checkUserNode.id = 'checkUser-node-' + id;

                    var articleNode = document.createElement('td');
                    articleNode.innerText = role.permissions.article ? "✔" : "✘";
                    articleNode.className = role.permissions.article ? 'has-right' : 'none-right';
                    articleNode.id = 'article-node-' + id;


                    var  editNode = document.createElement('td');
                    editNode.innerHTML = "<a onclick='editClick(this)'>编辑</a>&nbsp;&nbsp;<a onclick='delClick(this)'>删除</a>";

                    roleNode.appendChild(nameNode);
                    roleNode.appendChild(packageINode);
                    roleNode.appendChild(packageANode);
                    roleNode.appendChild(managerINode);
                    roleNode.appendChild(managerANode);
//                    roleNode.appendChild(checkUserNode);
                    roleNode.appendChild(articleNode);
                    roleNode.appendChild(editNode);

                    parent.appendChild(roleNode);
                }

            } else  {

            }
        })
    }
</script>